/**
 * Vite 配置文件
 * 
 * 功能概述：
 * 1. 配置 React 开发环境
 * 2. 设置开发服务器代理
 * 3. 配置移动端适配方案
 * 4. 优化构建和开发体验
 * 
 * 技术特点：
 * - 使用 Vite 作为构建工具
 * - 集成 React 插件
 * - 配置 px 到 vw 的自动转换
 * - 设置 API 代理服务器
 * - 移动端响应式适配
 */

// 导入 Vite 核心配置函数
import { defineConfig } from 'vite'
// 导入 React 插件，用于支持 JSX 和 React 开发
import react from '@vitejs/plugin-react'
// 导入 px 到 viewport 的转换插件，用于移动端适配
// @ts-expect-error - postcss-px-to-viewport lacks TypeScript definitions
import pxToViewport from 'postcss-px-to-viewport'

// Vite 配置文件
// 参考文档：https://vite.dev/config/
export default defineConfig({
  // ==================== 插件配置 ====================
  // 配置 Vite 插件，用于扩展构建功能
  
  /**
   * 插件列表
   * 
   * 配置项目使用的 Vite 插件
   * - react(): 支持 React 开发，包括 JSX 转换、热更新等
   */
  plugins: [react()],

  // ==================== 开发服务器配置 ====================
  // 配置开发服务器的各种选项
  
  /**
   * 开发服务器配置
   * 
   * 配置本地开发服务器的行为
   * 包括代理设置、端口配置、热更新等
   */
  server: {
    /**
     * 代理配置
     * 
     * 配置 API 请求代理，解决开发时的跨域问题
     * 将 /api 开头的请求代理到后端服务器
     */
    proxy: {
      /**
       * API 代理配置
       * 
       * 代理规则：
       * - 匹配路径：/api 开头的所有请求
       * - 目标服务器：http://10.59.9.18/
       * - 路径重写：移除 /api 前缀
       * - 超时设置：30秒
       */
      '/api': {
        target: 'http://10.59.9.18/',  // 后端服务器地址
        changeOrigin: true,            // 修改请求头中的 Origin
        rewrite: (path) => path.replace(/^\/api/, ''),  // 路径重写，移除 /api 前缀
        timeout: 30000                 // 请求超时时间（毫秒）
      },
      '/fanyi': {
        target: 'https://openapi.youdao.com/llmgateway/api/v1/chat/completions',  // 后端服务器地址（旧）
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fanyi/, ''),
        timeout: 30000
      },
      // 深信（有道）DeepSeek 代理，避免开发环境 CORS
      // 直接把 /youdao 映射到完整路径，避免路径拼接差异导致 404
      '/youdao': {
        target: 'https://openapi.youdao.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/youdao/, '/llmgateway/api/v1/chat/completions'),
        timeout: 30000
      }
      ,
      // 列出可用模型
      '/youdao_models': {
        target: 'https://openapi.youdao.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/youdao_models/, '/llmgateway/api/v1/models'),
        timeout: 30000
      }
    }
  },

  // ==================== CSS 处理配置 ====================
  // 配置 CSS 的预处理和后处理
  
  /**
   * CSS 配置
   * 
   * 配置 CSS 的处理方式，包括预处理器、后处理器等
   */
  css: {
    /**
     * PostCSS 配置
     * 
     * 配置 PostCSS 插件，用于 CSS 后处理
     * 包括自动添加前缀、单位转换等
     */
    postcss: {
      /**
       * PostCSS 插件列表
       * 
       * 配置 CSS 后处理插件
       */
      plugins: [
        /**
         * px 到 viewport 转换插件
         * 
         * 自动将 px 单位转换为 vw 单位，实现移动端适配
         * 基于设计稿尺寸进行等比例缩放
         */
        pxToViewport({
          // ==================== 视口配置 ====================
          
          /**
           * 设计稿宽度
           * 
           * 基于 375px 设计稿（iPhone 标准）
           * 这是转换的基准宽度
           */
          viewportWidth: 375,
          
          /**
           * 设计稿高度
           * 
           * 可选配置，用于横屏模式计算
           * 基于 iPhone 标准高度
           */
          viewportHeight: 667,
          
          // ==================== 单位配置 ====================
          
          /**
           * 需要转换的单位
           * 
           * 指定要转换的 CSS 单位
           */
          unitToConvert: 'px',
          
          /**
           * 转换后的视口单位
           * 
           * 将 px 转换为 vw 单位
           */
          viewportUnit: 'vw',
          
          /**
           * 字体转换单位
           * 
           * 字体大小转换的目标单位
           */
          fontViewportUnit: 'vw',
          
          // ==================== 转换规则 ====================
          
          /**
           * 最小转换值
           * 
           * 小于或等于 1px 的值不进行转换
           * 避免过小的值影响显示效果
           */
          minPixelValue: 1,
          
          /**
           * 媒体查询处理
           * 
           * 是否处理媒体查询里的 px
           * false 表示不处理，保持原始值
           */
          mediaQuery: false,
          
          // ==================== 文件过滤 ====================
          
          /**
           * 排除文件
           * 
           * 指定不需要转换的文件或目录
           */
          exclude: [
            /node_modules/i,     // 排除 node_modules 目录
            /\.(pc|desktop)/i,   // 排除桌面端样式文件
          ],
          
          /**
           * 包含文件
           * 
           * 指定需要转换的文件
           * undefined 表示处理所有文件
           */
          include: undefined,
          
          // ==================== 属性过滤 ====================
          
          /**
           * 属性列表
           * 
           * 指定哪些 CSS 属性需要转换
           * 使用 * 表示所有属性，! 表示排除
           */
          propList: [
            '*',              // 转换所有属性
            '!font-size',     // 排除字体大小（保持 px）
            '!line-height',   // 排除行高（保持 px）
            '!border-radius', // 排除圆角（保持 px）
            '!border',        // 排除边框（保持 px）
            '!box-shadow',    // 排除阴影（保持 px）
          ],
          
          // ==================== 选择器过滤 ====================
          
          /**
           * 选择器黑名单
           * 
           * 指定不需要转换的 CSS 选择器
           * 这些选择器下的样式不会被转换
           */
          selectorBlackList: [
            '.ignore',      // 忽略 .ignore 类下的样式
            '.hairlines',   // 忽略 .hairlines 类下的样式
          ],
          
          // ==================== 转换选项 ====================
          
          /**
           * 是否替换属性值
           * 
           * true 表示直接替换原值
           * false 表示添加新属性，保留原属性
           */
          replace: true,
          
          // ==================== 横屏模式 ====================
          
          /**
           * 横屏模式
           * 
           * 是否启用横屏模式支持
           * false 表示不启用
           */
          landscape: false,
          
          /**
           * 横屏时的视口单位
           * 
           * 横屏模式下使用的单位
           */
          landscapeUnit: 'vw',
          
          /**
           * 横屏时的视口宽度
           * 
           * 横屏模式下的基准宽度
           */
          landscapeWidth: 667,
        })
      ]
    }
  }
})
